<template>
	<view class="container">
		<view class="content">
			<view class="list" v-for="(item,index) in goodsList" :key="index">
				<view class="mall_box">
					<image :src="baseUrl + item.thumb_path" mode=""></image>
					<div class="info">
						<view class="name">{{item.description}}</view>
						<view class="price">价格：{{item.price}}元</view>
						<view class="time">上传时间：{{item.update_time}}</view>
					</div>
					<div class="btns">
						<view class="status error" v-if="item.status == 4">未通过</view>
						<view class="status success" v-if="item.status == 2">正常</view>
						<view class="status blue" v-if="item.status == 1">审核中</view>
						<view class="status error" v-if="item.status == 3">已下架</view>
						<view class="status wraing" @click="$gourl('/minePage/product/editProduct?id='+item.id)">修改
						</view>
					</div>
				</view>
				<view class="reason" v-if="item.status == 4">
					未通过原因：{{item.failure_reason}}
				</view>
			</view>
		</view>
		<view class="submit" @click="$gourl('/minePage/product/addProduct')">
			新增产品
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				goodsList: [],
				page: 1,
				pageSize: 10,
				count: 1,
				total: 1,
				status: 'loadmore'
			}
		},
		onShow() {
			this.getData()
		},
		onReachBottom() {
			if (this.page >= this.count) return this.status = 'nomore';
			this.status = 'loading';
			this.page = ++this.page;
			this.getData()
		},
		methods: {
			async getData() {
				await this.$allApi.getMyGoodsList({
					page: this.page,
					pageSize: this.pageSize
				}).then(res => {
					if (this.page == 1) {
						this.goodsList = res.data.list.data
					} else {
						this.goodsList = [...this.goodsList, ...res.data.list.data]
					}
					this.count = Math.ceil(Number(res.data.list.total) / this.pageSize)
					if (this.page >= this.count) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.list {
		padding-bottom: 30rpx;

		.reason {
			width: 710rpx;
			height: 52rpx;
			border-radius: 6rpx;
			background: #FFFFFF;
			border: 2rpx solid #FF0000;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FF0000;
		}

		.mall_box {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btns {
				.status {
					width: 112rpx;
					height: 52rpx;
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
				}

				.error {
					background: #ffe8e8;
					border: 1px solid red;
					color: red;
				}

				.wraing {
					background: #fefbe8;
					border: 1px solid #F8CF00;
					color: #F8CF00;
					margin-top: 20rpx;
				}

				.success {
					background: #EAF4E8;
					border: 1px solid #40AE36;
					color: #40AE36;
				}

				.blue {
					background: #e8f5f9;
					border: 1px solid #0096C3;
					color: #0096C3;
				}
			}

			.info {
				flex: 1;
				padding-left: 20rpx;
				font-size: 24rpx;
				padding-right: 20rpx;
				line-height: 2;

				.price {
					color: #40AE36;
				}

				.time {
					font-size: 20rpx;
				}
			}

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 16rpx;
			}
		}
	}

	.submit {
		width: 710rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background: #40AE36;
		z-index: 999;
		left: 20rpx;
		position: fixed;
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
		bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;

	}

	.content {
		min-height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
		overflow-y: scroll;
		background: #fff;
	}

	.container {
		padding: 20rpx;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		background: #f8f8f8;
	}
</style>